<script lang="ts" setup>
import { ref } from 'vue'
import { useSafeAreaHooks } from '@/hooks/useSafeArea'

const { top } = useSafeAreaHooks()

const getSafeAreaStyles = computed(() => ({ paddingTop: `${top}px` }))

function onLogin() {
  uni.navigateTo({ url: '/pages/login/index' })
}

function toSubpage() {
  uni.navigateTo({ url: '/views/other/index' })
}
</script>

<template>
  <view
    class="container-page"
    :style="getSafeAreaStyles"
  >
    <view class="flex flex-col gap-2">
      <text class="text-size-2xl">
        首页内容
      </text>
      <wd-button @click="onLogin">
        去登录
      </wd-button>
      <wd-button
        type="error"
        @click="toSubpage"
      >
        subpage页面
      </wd-button>
      <view
        v-for="item in 30"
        :key="item"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<style lang="less" scoped>
.container-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #c06f6f;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 20rpx;
}
</style>
